<template>
    <div class="wrapper">
        <v-head></v-head>
        <div class="content">

            <el-row type="flex" class="row-bg" justify="end">
                <el-col :span="2">
                    <el-button type="primary">创建机房</el-button>
                </el-col>
            </el-row>


            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <!--机房card-->
                        <el-card class="box-card">
                            <div slot="header" style="text-align:left;">
                                <div class="clearfix">
                                    <span style="line-height: 36px;"><span>PIENV</span> <el-tag
                                        type="success">环境监控</el-tag></span>
                                    <div style="float: right;line-height: 36px;">
                                        <i class="el-icon-delete" @click="delCard(item)"></i>
                                        <i class="el-icon-edit" @click="goDetail(item)"></i>
                                    </div>
                                </div>
                                <div style="font-size:12px;">
                                    接入方式：<span></span>
                                    <br>
                                    创建时间：<span></span>
                                </div>
                            </div>
                            <el-row>
                                <el-col :span="12">
                                    <el-card class="box-card">
                                        <div><span></span>台</div>
                                        <div>接入设备</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="box-card">
                                        <div><span></span>台</div>
                                        <div>生成应用</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="box-card">
                                        <div><span></span>台</div>
                                        <div style="line-height:21px;">API Key</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="box-card">
                                        <div><span></span>台</div>
                                        <div>触发器</div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-card>


                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <!--机房card-->
                        <el-card class="box-card">
                            <div slot="header" style="text-align:left;">
                                <div class="clearfix">
                                    <span style="line-height: 36px;"><span>PIENV</span> <el-tag
                                        type="success">环境监控</el-tag></span>
                                    <div style="float: right;line-height: 36px;">
                                        <i class="el-icon-delete" @click="delCard(item)"></i>
                                        <i class="el-icon-edit" @click="goDetail(item)"></i>
                                    </div>
                                </div>
                                <div style="font-size:12px;">
                                    接入方式：<span></span>
                                    <br>
                                    创建时间：<span></span>
                                </div>
                            </div>
                            <el-row>
                                <el-col :span="12">
                                    <el-card class="box-card">
                                        <div><span></span>台</div>
                                        <div>接入设备</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="box-card">
                                        <div><span></span>台</div>
                                        <div>生成应用</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="box-card">
                                        <div><span></span>台</div>
                                        <div style="line-height:21px;">API Key</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="box-card">
                                        <div><span></span>台</div>
                                        <div>触发器</div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-card>


                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import vHead from '../common/Header.vue';
    export default {
        components: {
            vHead
        }
    }
</script>

<style>

    .content {
        background: none repeat scroll 0 0 #fff;
        position: absolute;
        left: 100px;
        right: 0;
        top: 70px;
        bottom: 0;
        width: auto;
        padding: 40px;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }


</style>
